
//引入路由
// 懒加载引入
/* 
路由懒加载
改变引入方式
// suspense包裹组件  
// 封装suspense 函数  fallback 放 loading 组件 正在等待ing组件

// 最后在路由表 引入 封装suspense 函数 

*/
import { lazy, Suspense } from 'react'
import { Navigate } from 'react-router-dom'
/* 
省略 return 省略 {}
*/
const Login = lazy(() => import('../pages/Login') )
const Main = lazy(() => import('../pages/Main'))
const NotFound = lazy(() => { return import('../components/404') })
const Home = lazy(() => { return import('../pages/Main/Home') })
const About = lazy(() => { return import('../pages/Main/About') })
const List = lazy(() => { return import('../components/List') })
const Spinner = lazy(() => { return import('../components/Spinner') })

// import Login from '../pages/Login'
// import Main from '../pages/Main'
// import NotFound from '../components/404'
// import Home from '../pages/Main/Home'
// import About from '../pages/Main/About'
// import List from '../components/List'

//懒加载的路由函数
//返回一个
const load = (Comp) => {
  return <Suspense  fallback={<Spinner />}>
      <Comp />
  </Suspense>
}

//路由表
const routes = [
  {
    path: '/login',
    element: load(Login)
  },
  {
    path: '/main',
    element: load(Main),
    children: [
      {
        path: "/main/home",
        element: load(Home),
        children: [
          {
            path: "/main/home/music/:id",
            element: load(List)
          },
          {
            path: "/main/home/news/:id",
            element: load(List)
          },
        ]
      },
      {
        path: "/main/about",
        element: load(About)
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to="/login" />
  },
  {
    path: '*',
    element: load(NotFound)
  },
]

export default routes


//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
// export const GetRoutes = () => {
//   //在组件中在外层可以使用hook
//   return useRoutes(routes)
// }

// //自定义hooks
// export const useMyRoutes = () => {
//   //在自定义hooks中是可以使用hook
//   return useRoutes(routes)
// }




